<template>
  <div class="application-message">
    <div class="application-message-top">
        <div class="application-message-top-icon"><img src="./../../../../static/images/application-message.png"></div>
        <div class="application-message-top-text">你已提交入会申请，请等待审核结果</div>
    </div>
    <div class="application-message-warp">
      <van-steps :active="active" :steps="steps" :active-color="activeColor"/>
      <div class="application-message-box" v-if="showPayMessageBox">
        <div class="application-message-box-text1">待缴会费</div>
        <div class="application-message-box-text2">你正在申请入会广西藤县商会</div>
        <div class="application-message-box-text2">请联系管理员进行缴费</div>
        <div class="application-message-box-money">￥{{message.amount | warpPrice}}</div>
      </div>
    </div>
    <div class="go-home" @click="switchTabToHome">返回首页</div>
    <div class="re-btn" v-if="reBtn" @click="reBtnClick">重新申请</div>
    <div class="pay-btn" v-if="false">支付</div>
  </div>
</template>

<script>

export default {
  data(){
    return{
      activeColor:"#07c160",
      active: -1,
      showPayMessageBox:false,
      reBtn:false,
      steps: [{text: '已申请'},{text: '审核中'},{text: '已通过'},{text: '待付款',},{text: '完成'}],
      message:null,
    }
  },
  onShow(){
    this.init()
    this.reqApplicationStatus()
    this.checkLogin();
  },
  filters:{
    warpPrice(value){
      if(value){
        return value.toFixed(2)
      }
    }
  },
  methods:{
    //还原状态
    init(){
      this.activeColor = '07c160';
      this.active = -1;
      this.showPayMessageBox = false;
      this.reBtn = false;
      this.steps = [{text: '已申请'},{text: '审核中'},{text: '已通过'},{text: '待付款',},{text: '完成'}];
      this.message = null
    },
    async reqApplicationStatus(){
      var userToken = wx.getStorageSync('userToken');
      let params = {
        user_token: userToken
      }
      let res = await this.$api.getApplicationStatus(params);
      wx.stopPullDownRefresh()
      if(res.data.level == "success"){
        let data = res.data.data;
        this.message = data;
        this.active = this.message.application_status;
        if(this.active == 5){
          this.active = 2;
          this.activeColor = "red";
          this.reBtn = true;
          this.steps[2].text = "审核失败";
        }else if(this.active == 3){
          this.showPayMessageBox = true;
        }else if(this.active == 4){
          this.active = 4;
          wx.showToast({
            title: '审核已经通过',
            icon: 'none',
            duration: 1000
          })
          setTimeout(()=>{
            this.switchTabToMenber();
          },1000)
        }else{
          this.showPayMessageBox = false;
          this.reBtn = false;
        }
      }else{
        // wx.showToast({
        //   title: '获取信息失败',
        //   icon: 'none',
        //   duration: 1000
        // })
      }
    },
    async checkLogin(){
      let user_token = wx.getStorageSync('userToken');
      let params = {};
      if(!user_token){
        wx.showToast({
          title: "请先登录",
          icon: 'none',
          duration: 1000
        })
        setTimeout(()=>{
          wx.redirectTo({
            url: "/pages/homeMain/login/main"
          })
        }, 1000)
      }
    },
    //如何申请页面
    reBtnClick(){
      wx.navigateTo({
        url: '/pages/homeMain/partakeForm/main'
      })
    },
    //跳转到会员页面
    switchTabToMenber(){
      wx.switchTab({
        url: '/pages/menberMain/menber/main'
      })
    },
    //跳转到首页
    switchTabToHome(){
      wx.switchTab({
        url: '/pages/homeMain/home/main'
      })
    },
  }
}
</script>

<style lang="scss" scoped>
  .application-message{
    .go-home{
      width: 300rpx;
      height: 80rpx;
      line-height: 80rpx;
      text-align: center;
      color: #ffffff;
      background-color: #07c160;
      margin: 100rpx auto;
      border-radius: 10rpx;
    }
    .application-message-top{
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      margin: 40rpx 0;
      border: 2px dashed #07c160;
      border-radius: 6px;
      padding: 40rpx 0;
      .application-message-top-icon{
        width: 158rpx;
        height: 128rpx;
        img{
          width: 100%;
          height: 100%;
        }
      }
      .application-message-top-text{
        margin-top: 40rpx;
        color: #666;
      }
    }
    .application-message-warp{
      border: 2px solid #07c160;
      border-radius: 6px;
      padding: 40rpx 0;
      .application-message-box{
        margin-top: 40rpx;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        .application-message-box-text2{
          margin-top: 40rpx;
          color: #888888;
          font-size: 28rpx;
        }
        .application-message-box-money{
          margin-top: 60rpx;
          font-size: 36rpx;
          font-weight: 600;
          color: rgb(247, 8, 8);
        }
      }
    }
    .pay-btn,
    .re-btn{
      position: fixed;
      bottom: 0;
      left: 0;
      width: 100%;
      height: 80rpx;
      line-height: 80rpx;
      text-align: center;
      color: #ffffff;
      background-color: #07c160;
    }
  }
  
</style>